<template>
	<view>
		<view class="tarbar-wrap">
			<view class="tarbar-item" @click="goPage(0)">
				<image src="@/static/tab_icons/bottom-icon1-select.png" mode="widthFix" v-if="value==0"/>
				<image src="@/static/tab_icons/bottom-icon1.png" mode="widthFix" v-if="value!=0"/>
				<view :style="{color:value==0?'#ffaa22':''}">首页</view>
			</view>
			<view class="tarbar-item tarbar-center" @click="goPage(1)">
				<view class="tarbar-item tarbar-center-content">
					<image src="@/static/tab_icons/bottom-icon2-select.png" mode="widthFix" v-if="value==1"/>
					<image src="@/static/tab_icons/bottom-icon2.png" mode="widthFix" v-if="value!=1"/>
					<view :style="{background:value==1?'#ffaa22':'#ccc'}" class="tarbar-center-line"></view>
				</view>
			</view>
			<view class="tarbar-item" @click="goPage(2)">
				<image src="@/static/tab_icons/bottom-icon3-select.png" mode="widthFix" v-if="value==2"/>
				<image src="@/static/tab_icons/bottom-icon3.png" mode="widthFix" v-if="value!=2"/>
				<view :style="{color:value==2?'#ffaa22':''}">我的</view>
			</view>
		</view>
		
	</view>
</template>

<script>

	export default {
		props:{
			value:{
				type:Number,
				default:0
			}
		},
		
		name:"tab-bar",
		
		methods:{
			goPage(e){
				if(e==0){
					 uni.switchTab({
				            url: '/pages/index/index'
				        });
				}else if(e==1){
					 uni.switchTab({
				            url: '/pages/saishi/saishi'
				        });
				}else if(e==2){
					uni.switchTab({
					       url: '/pages/my/my'
					   });
				}
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.tarbar-wrap{background:#fff;display: flex;flex-direction: center; height:50px;border-top:1px solid #ccc ;
	position: fixed;bottom:0px;left:0;width: 750rpx;font-size: 14px;padding-bottom: env(safe-area-inset-bottom);
		.tarbar-item{width:250rpx;display: flex;flex-direction: column;
		justify-content: center;align-items: center;
			image{width:22px}
		}
		.tarbar-center{position: relative;
			.tarbar-center-content{position: absolute;bottom:0;padding-bottom: 7px;
				image{width: 75px;border-radius: 100px;}
				.tarbar-center-line{height:3px;width:35px;border-radius: 100px;}
			}
		}
	}
</style>